<template>
	<div>
		<div id="ee">
		    <form id="ff">
		        <fieldset>
		            <legend>识别人脸</legend>
		            <p>
		                <label>请上传可识别脸部特征: </label>
						<input type="file" name="myfile" id="btnFile" accept="image/*"  placeholder="请选择头像上传"/>
		            </p>
		            <p>
						<input type="button" value="开始识别" @click="uploadBtn"><br />
						<hr>
						<input type="button" :value="btnVal" ><br />
		            </p>
		        </fieldset>
		    </form>
		</div>
		<div class="flex_row" v-if="imgYuantu">
						<div><img :src="imgYuantu" alt="识别前"></div>
						<div><img :src="imgEdit" alt="识别后"></div>
					</div>
	</div>
</template>
<script>
	import axios from 'axios'
	export default {
		data(){
			return {
				btnVal:"未上传",
				imgYuantu:"",
				imgEdit:"",
			}
		},
		methods:{
			uploadBtn() {
				this.btnVal = "正在识别，请稍等。。。"
				var btnFile = document.querySelector('#btnFile');
				let formData = new FormData();
				this.imgYuantu = ""
				this.imgEdit = ""
				formData.append('myfile', btnFile.files[0]);
				axios.post('http://39.103.131.74:9999/face_draw', formData).then(res => {
					this.btnVal =res.data.faceNum? `识别完成,共有${res.data.faceNum}人`: `识别完成,未检测到人脸`
					this.imgYuantu = res.data.faceImg1||""
					this.imgEdit = res.data.faceImg2||""
				})
			}
		}
	}
</script>
<style lang="less" scoped>
	#ee{
	    width: 600px;
	    margin: 30px auto;
		fieldset{
		    width:400px;
		    padding: 20px;
			border: 1px solid #000000;
			p {
			    margin-bottom: 10px;
				input{
				    height: 40px;
				    width: 96%;
				}
				label{
				    margin-bottom:5px;
				}
			}
		}
	}
	.flex_row{
		display: flex;
		width: 100%;
		flex-direction: row;
		justify-content: space-around;
		img{
			flex: 1;
			width: 100%;
			padding:0 10px;
		}
	}
</style>
